<template>
  <div class="captcha-container" @click="refreshCode">
    <canvas ref="canvas" :width="width" :height="height"></canvas>
    <span class="refresh-icon" v-if="showRefreshIcon">
      <i class="fa fa-refresh"></i>
    </span>
  </div>
</template>

<script>
export default {
  name: 'CaptchaYzma',
  props: {
    width: {
      type: Number,
      default: 120
    },
    height: {
      type: Number,
      default: 40
    },
    codeLength: {
      type: Number,
      default: 4
    },
    showRefreshIcon: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      code: '',
      canvas: null
    }
  },
  mounted() {
    this.initCanvas();
    this.refreshCode();
  },
  methods: {
    initCanvas() {
      this.canvas = this.$refs.canvas.getContext('2d');
    },
    refreshCode() {
      // 生成随机验证码
      this.code = this.generateCode();
      // 绘制验证码
      this.drawCode();
      // 触发事件通知父组件验证码已更新
      this.$emit('update:code', this.code);
    },
    generateCode() {
      const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      let code = '';
      for (let i = 0; i < this.codeLength; i++) {
        const randomIndex = Math.floor(Math.random() * chars.length);
        code += chars.charAt(randomIndex);
      }
      return code;
    },
    drawCode() {
      // 清空画布
      this.canvas.clearRect(0, 0, this.width, this.height);

      // 设置背景色（随机浅色系）
      this.canvas.fillStyle = this.getRandomLightColor();
      this.canvas.fillRect(0, 0, this.width, this.height);

      // 绘制干扰线
      for (let i = 0; i < 5; i++) {
        this.canvas.strokeStyle = this.getRandomColor();
        this.canvas.beginPath();
        this.canvas.moveTo(
            Math.random() * this.width,
            Math.random() * this.height
        );
        this.canvas.lineTo(
            Math.random() * this.width,
            Math.random() * this.height
        );
        this.canvas.stroke();
      }

      // 绘制干扰点
      for (let i = 0; i < 30; i++) {
        this.canvas.fillStyle = this.getRandomColor();
        this.canvas.beginPath();
        this.canvas.arc(
            Math.random() * this.width,
            Math.random() * this.height,
            1,
            0,
            2 * Math.PI
        );
        this.canvas.fill();
      }

      // 绘制验证码字符
      for (let i = 0; i < this.code.length; i++) {
        const char = this.code.charAt(i);
        this.canvas.font = 'bold 24px Arial';
        this.canvas.fillStyle = this.getRandomColor();
        this.canvas.textBaseline = 'middle';

        // 随机旋转角度和位置
        const x = 15 + i * (this.width - 30) / this.code.length;
        const y = this.height / 2;
        const rotate = (Math.random() - 0.5) * 0.3; // 随机旋转角度

        this.canvas.save();
        this.canvas.translate(x, y);
        this.canvas.rotate(rotate);
        this.canvas.fillText(char, 0, 0);
        this.canvas.restore();
      }
    },
    getRandomColor() {
      const r = Math.floor(Math.random() * 100);
      const g = Math.floor(Math.random() * 100);
      const b = Math.floor(Math.random() * 100);
      return `rgb(${r}, ${g}, ${b})`;
    },
    getRandomLightColor() {
      const r = Math.floor(Math.random() * 50) + 200;
      const g = Math.floor(Math.random() * 50) + 200;
      const b = Math.floor(Math.random() * 50) + 200;
      return `rgb(${r}, ${g}, ${b})`;
    }
  }
}
</script>

<style scoped>
.captcha-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
}
.refresh-icon {
  position: absolute;
  top: 5px;
  right: 5px;
  color: rgba(255, 255, 255, 0.7);
  transition: transform 0.3s;
}
.captcha-container:hover .refresh-icon {
  transform: rotate(180deg);
}
</style>